<template>
  <div class="reply_tail">
    <el-row>
      <el-col :span="12"><el-input placeholder="请输入小尾巴内容" v-model="content"></el-input></el-col>
    </el-row>
    <el-row>
      <el-button @click="handleSave" :loading="isSave" type="primary">保存</el-button>
      <el-checkbox v-model="status" :true-label="1" :false-label="0" @change="handleCheck">启用</el-checkbox>
    </el-row>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        appid: this.$route.params.appid,
        isSave: false
      }
    },
    mounted () {
      this.getReplyTail(this.appid)
    },
    computed: {
      ...mapState({
        replyTail: state => state.wechatManage.replyTail
      }),
      status: {
        get () {
          return this.$store.state.wechatManage.replyTail.status
        },
        set (val) {
          this.UPDATE_REPLY_TAIL({status: val})
        }
      },
      content: {
        get () {
          return this.replyTail.content
        },
        set (val) {
          this.UPDATE_REPLY_TAIL({content: val})
        }
      }
    },
    methods: {
      ...mapActions(['getReplyTail', 'setReplyTail', 'setIfReplyTail']),
      ...mapMutations(['UPDATE_REPLY_TAIL']),
      async handleSave () {
        this.isSave = true
        const res = await this.setReplyTail({
          appid: this.appid,
          content: this.replyTail.content
        })
        this.isSave = false
        if (res.data.code === 1) {
          this.$message.success('保存成功')
        }
      },
      handleCheck () {
        this.setIfReplyTail({
          appid: this.appid,
          status: this.replyTail.status
        })
      }
    }
  }
</script>
<style lang="scss">
  .reply_tail{
    .el-row{margin-bottom:15px;}
  }
</style>
